<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .w {
            width: 1000px;
            margin: 20px auto;
        }

        .container {
            margin-bottom: 100px;
        }

        .row {
            display: flex;
        }

        .row:first-child {
            background-color: #f0f0f0;
            font-weight: 700;
            color: #333;
        }

        .row>div {
            flex: 1;
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

        .price,
        .total-price {
            color: #E2211C;
            font-weight: 700;
        }

        .step {
            margin: auto;
            height: 40px;
            width: fit-content;
            height: fit-content;
            border: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
        }

        .step button {
            cursor: pointer;
            border: 0;
            background-color: #f0f0f0;
            padding: 6px 10px;
        }

        .step input {
            width: 20px;
            text-align: center;
            border: 0;
            outline: none;
        }

        .btn {
            border: 0;
            background-color: #f0f0f0;
            padding: 4px 10px;
            letter-spacing: 4px;
            cursor: pointer;
        }

        .btn-danger {
            background-color: #E2211C;
            color: #fff
        }

        .submit-bar-outer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        }

        .submit-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .submit-bar button {
            border: 0;
            background-color: #E2211C;
            color: #fff;
            padding: 10px 20px;
            cursor: pointer;
        }

        .goods-list {
            display: flex;
            gap: 10px;
        }

        .goods-card {
            width: 200px;
            height: 220px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 16px;
        }
    </style>
</head>

<body>
    <!--  -->
    <h3 class="w">商品列表</h3>
    <hr>
    <div class="goods-list w">
        <!-- <div class="goods-card">
            <img src="https://dummyimage.com/100x100/FAAB1C/fff" alt="">
            <h5>苹果手机</h5>
            <p>&yen;9999</p>
            <button>加入购物车</button>
        </div>
     -->
    </div>
    <script>
        // 商品列表
        var goodsList = [
            {
                id: 1,
                goodsname: "苹果手机",
                cover: 'https://dummyimage.com/100x100/FAAB1C/fff',
                price: 9999.99
            },
            {
                id: 2,
                goodsname: "华为手机",
                cover: 'https://dummyimage.com/100x100/FAAB1C/fff',
                price: 5999.99
            },
            {
                id: 3,
                goodsname: "小米手机",
                cover: 'https://dummyimage.com/100x100/FAAB1C/fff',
                price: 1999.99
            },
            {
                id: 4,
                goodsname: "OPPO手机",
                cover: 'https://dummyimage.com/100x100/FAAB1C/fff',
                price: 2999.99
            },
            {
                id: 5,
                goodsname: "vivo手机",
                cover: 'https://dummyimage.com/100x100/FAAB1C/fff',
                price: 2799.99
            }
        ]
        // 获取元素对象
        var goodsListDOM = document.querySelector('.goods-list')
        goodsList.forEach(function (item) {
            // 动态创建元素
            var card = document.createElement('div')
            card.className = 'goods-card'

            var img = document.createElement('img')
            img.src = item.cover
            card.appendChild(img)

            var h5 = document.createElement('h5')
            h5.innerText = item.goodsname
            card.appendChild(h5)

            var p = document.createElement('p')
            p.innerHTML = "&yen;" + item.price
            card.appendChild(p)

            var button = document.createElement('button')
            button.innerText = '加入购物车'
            // 注册点击事件
            button.onclick = function () {
                // 1-读取本地存储localStorage中的购物车列表数据 
                // [{id:"",goodsname:"",price:"",num:""},{id:"",goodsname:"",price:"",num:""}]
                var cartList = JSON.parse(localStorage.getItem('cartList') || '[]')
                // 2-将当前商品信息追加到购物车列表数组的末尾( )
                //  2.1-判断当前商品之前是否存在? 如果存在, 数量+1, 否则添加一条商品信息
                // 假设当前商品之前没有添加过购物车
                var isExist = false
                // 用来记录商品对象在购物车列表数组中的索引
                var currentIndex
                for (var i = 0; i<cartList.length; i++) {
                    if (cartList[i].id === item.id) {
                        // 推翻假设
                        isExist = true
                        currentIndex = i
                        break
                    }
                }
                // 当前商品之前已经加入过购物车, 商品数量+1
                if (isExist) {
                    console.log('商品已存在');
                    cartList[currentIndex].num += 1
                } else {
                    // 当前商品是第一次添加购物车, 将商品对象添加到购物车列表数组中
                    console.log('商品不存在');
                    // 手动构造购物车商品对象
                    var goods = { id: item.id, goodsname: item.goodsname, 
                        cover: item.cover, price: item.price, num: 1 }
                    // 将商品对象追加到购物车列表数组中
                    cartList.unshift(goods)
                }
                // 更新本地存储中的购物车数据
                localStorage.setItem('cartList',JSON.stringify(cartList))
            }
            card.appendChild(button)
            goodsListDOM.appendChild(card)
        })
    </script>

</body>

</html>